// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好

const staticOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: (params) => {
      return `${params[0].axisValue}<br />
              ${params[0].marker} ${params[0].seriesName}: ${Math.abs(params[0].value)} <br />
              ${params[1].marker} ${params[1].seriesName}: ${Math.abs(params[1].value)} `
    }
  },
  legend: {
    data: ['全国百分比', '嘉兴百分比'],
    textStyle: {
      fontSize: 14,
      color: '#d9e7ff'
    },
    itemHeight: 5,
    itemWidth: 20
  },
  grid: {
    left: '4%',
    right: '6%',
    bottom: '1%',
    top: '15%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'value',
      min: -50,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#4876c7',
          opacity: 0.2
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#4876c7'
        }
      },
      axisLabel: {
        formatter: (value) => Math.abs(parseInt(value)),
        textStyle: {
          fontSize: 14,
          color: '#bad3ff'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      axisTick: {show: false},
      data: ['29及以下', '30~34岁', '35~39岁', '40~44岁', '45~49岁', '50~54岁', '55~59岁', '60及以上'],
      axisLabel: {
        textStyle: {
          fontSize: 14,
          color: '#bad3ff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#4876c7',
          opacity: 0.2
        }
      }
    }
  ],
  series: [
    {
      name: '全国百分比',
      type: 'bar',
      stack: '人数',
      label: {
        normal: {
          show: true
        }
      },
      data: [320, 302, 341, 374]
    },
    {
      name: '嘉兴百分比',
      type: 'bar',
      stack: '人数',
      barWidth: 10,
      barGap: '10%',
      label: {
        normal: {
          show: true
        }
      },
      data: [-120, -132, -101, -134]
    }
  ]
}

const staticOptionMid = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: (params) => {
      return `${params[0].axisValue}<br />
              ${params[0].marker} ${params[0].seriesName}: ${Math.abs(params[0].value)} <br />
              ${params[1].marker} ${params[1].seriesName}: ${Math.abs(params[1].value)} `
    }
  },
  legend: {
    data: ['全国百分比', '嘉兴百分比'],
    textStyle: {
      fontSize: 14,
      color: '#d9e7ff'
    },
    itemHeight: 5,
    itemWidth: 20
  },
  grid: {
    left: '4%',
    right: '6%',
    bottom: '1%',
    top: '5%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'value',
      min: -50,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#4876c7',
          opacity: 0.2
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#4876c7'
        }
      },
      axisLabel: {
        formatter: (value) => Math.abs(parseInt(value)),
        textStyle: {
          fontSize: 14,
          color: '#bad3ff'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      axisTick: {show: false},
      data: ['29及以下', '30~34岁', '35~39岁', '40~44岁', '45~49岁', '50~54岁', '55~59岁', '60及以上'],
      axisLabel: {
        textStyle: {
          fontSize: 14,
          color: '#bad3ff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#4876c7',
          opacity: 0.2
        }
      }
    }
  ],
  series: [
    {
      name: '男',
      type: 'bar',
      stack: '人数',
      label: {
        normal: {
          show: true
        }
      },
      data: [320, 302, 341, 374]
    },
    {
      name: '女',
      type: 'bar',
      stack: '人数',
      label: {
        normal: {
          show: true
        }
      },
      data: [-120, -132, -101, -134]
    }
  ]
}

const staticOptionSmall = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: (params) => {
      return `${params[0].axisValue}<br />
              ${params[0].marker} ${params[0].seriesName}: ${Math.abs(params[0].value)} <br />
              ${params[1].marker} ${params[1].seriesName}: ${Math.abs(params[1].value)} `
    }
  },
  legend: {
    data: ['全国百分比', '嘉兴百分比'],
    textStyle: {
      fontSize: 14,
      color: '#d9e7ff'
    },
    itemHeight: 5,
    itemWidth: 20
  },
  grid: {
    left: '4%',
    right: '6%',
    bottom: '1%',
    top: '5%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'value',
      min: -50,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#4876c7',
          opacity: 0.2
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#4876c7'
        }
      },
      axisLabel: {
        formatter: (value) => Math.abs(parseInt(value)),
        textStyle: {
          fontSize: 14,
          color: '#bad3ff'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      axisTick: {show: false},
      data: ['20~30岁', '30~40岁', '40~50岁', '50岁以上'],
      axisLabel: {
        textStyle: {
          fontSize: 14,
          color: '#bad3ff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#4876c7',
          opacity: 0.2
        }
      }
    }
  ],
  series: [
    {
      name: '全国百分比',
      type: 'bar',
      stack: '人数',
      label: {
        normal: {
          show: true
        }
      },
      data: [320, 302, 341, 374]
    },
    {
      name: '嘉兴百分比',
      type: 'bar',
      stack: '人数',
      label: {
        normal: {
          show: true
        }
      },
      data: [-120, -132, -101, -134]
    }
  ]
}

// 备选颜色，有需求则进行循环

const colors = ['#0099ff', '#ffdd89', '#2ac2e2', '#0159c2', '#7574ee', '#0099ff', '#7574ee']

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    if (screen === 1024) {
      this.option = staticOptionSmall
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // 装配数据 必须使用箭头函数
    this.option.yAxis.data = additionalOptions.axisData
    additionalOptions.seriesData.forEach((p1, p2) => {
      this.option.series.push({
        name: p1.name,
        type: 'bar',
        stack: '人数',
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 14
            },
            formatter: (params) => {
              return Math.abs(params.data)
            }
          }
        },
        barMaxWidth: 8,
        itemStyle: {
          color: colors[p2],
          barBorderRadius: 2
        },
        data: p1.data
      })
    })
    this.option.series[0].label.normal.position = 'left'
    this.option.series[1].label.normal.position = 'right'
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
